<div class="color-picker-panel" [class.disabled]="!isShowPanel" #pickerPanel (click)="$event.stopPropagation()">
    <div class="color-picker-main">
        <hue [vertical]="false" [(hue)]="control.hue" [(color)]="control.value"></hue>
        <sv-panel [hue]="control.hue" [(color)]="control.value"></sv-panel>
    </div>
    <alpha [(color)]="control.value" *ngIf="showAlpha"></alpha>

    <div class="input-btn" style="display: flex; align-items: center">
        <span *ngIf="currentColorTypeIndex > -1" style="width: 40px; margin-right: 10px">
            {{ presetColorType[currentColorTypeIndex]['text'] }}
        </span>
        <input type="text" [(ngModel)]="_color" style="float: none" />
        <div class="type-icon-btn-wrapper" *ngIf="currentColorTypeIndex > -1">
            <span class="f-icon f-icon-arrow-60-up type-icon-btn" (click)="changeColorFormatByIcon('up')"></span>
            <span class="f-icon f-icon-arrow-60-down type-icon-btn" (click)="changeColorFormatByIcon('down')"></span>
        </div>
    </div>
    <div class="input-btn">
        <button class="btn btn-clear" (click)="clear()">
            <span>清空</span>
        </button>
        <button class="btn btn-secondary" (click)="commit()">确定</button>
    </div>
    <preset [(color)]="control.value" [colorPresets]="control.presets" [(hue)]="control.hue" *ngIf="presets.length > 0"> </preset>
</div>
<div class="color-picker-wrapper">
    <input
        type="text"
        class="color-picker-input form-control"
        [(ngModel)]="preColor"
        [readonly]="editable || disabled"
        (blur)="onBlur($event)"
        (click)="$event.stopPropagation()"
        (keydown.tab)="isShowPanel = false"
    />
    <div class="color-picker-trigger" (click)="toggleShowPanel($event)">
        <div class="color-picker-trigger-inner" [class.is-alpha]="showAlpha">
            <div #trigger></div>
        </div>
    </div>
</div>
